<template>
 <!-- {{ props.graphDataList }} -->
   
  <div ref="chartContainer" style="height: 600px;width: 700px;"></div>
</template>

<script setup>
import { onMounted, ref, defineExpose } from 'vue'
import Plotly from 'plotly.js-dist'

const chartContainer = ref(null)
const subList = ref([])

const props = defineProps({
  graphDataList: {
    type: Array,
    default: () => [],
  },
})

function changeData( item) {

  var arr= props.graphDataList.map(item=>item);
  
  // var trace = []
  // var item = props.graphDataList[index];
  // console.log(props.graphDataList,index)
  // trace.push({
  //   x: item.x, // 数据集1的X坐标
  //   y: item.y, // 数据集1的Y坐标
  //   mode: 'markers',
  //   //name: item.sub_list, // 图例名称
  //   marker: {
  //     color: item.color2, // 蓝色
  //     size: 2,
  //     // colorscale: 'YlOrRd', // 红黄渐变色板
  //     // showscale: true, // 显示颜色刻度
  //   },
  // })

  // const layout = {
  //   title: '散点图',
  //   xaxis: { title: 'X轴' },
  //   yaxis: { title: 'Y轴' },
  //   legend: {
  //     x: 0.5, // 水平居中（0.5 表示中心位置）
  //     y: 1.1, // 放置在图表上方（超出图表区域）
  //     xanchor: 'center', // 水平居中锚点
  //     yanchor: 'bottom', // 垂直方向从底部对齐（确保在上方）
  //     orientation: 'h', // 水平排列（可选，根据需求调整）
  //     xref: 'paper', // 相对于图表容器
  //     yref: 'paper'
     
  //   }, // 相对于图表容器 }, // 调整图例位置
  //   showlegend: false,
  // }
  // console.log(trace)
  // if (chartContainer.value) {
  //   Plotly.newPlot(chartContainer.value, trace, layout)
  // }
}

const childMethod = (data) => {
 
  subList.value = data;
  var trace = []
  console.log( props.graphDataList,' props.graphDataList')
  props.graphDataList.forEach((graphData, index) => {
   
  //  graphData.sub.forEach((item,i)=>{
    // console.log(graphData.x[i])
   

    trace.push({
      x: graphData.x, // 数据集1的X坐标
      y: graphData.y, // 数据集1的Y坐标
      mode: 'markers',
      hoverinfo: 'none',
     name: 'd', // 图例名称
      marker: {
        color: graphData.sub2, // 蓝色
        size: 5,
        // colorscale: 'YlOrRd', // 红黄渐变色板
        // showscale: true, // 显示颜色刻度
        
      },
    })
   })
    
  // })

  const layout = {
    title: '散点图',
    // xaxis: { title: 'X轴' ,range: [0, null]},
    // yaxis: { title: 'Y轴' ,range: [0, null]},
    legend: {
      x: 0.5, // 水平居中（0.5 表示中心位置）
      y: 1.1, // 放置在图表上方（超出图表区域）
      xanchor: 'center', // 水平居中锚点
      yanchor: 'bottom', // 垂直方向从底部对齐（确保在上方）
      orientation: 'h', // 水平排列（可选，根据需求调整）
      xref: 'paper', // 相对于图表容器
      yref: 'paper',
     
    }, // 相对于图表容器 }, // 调整图例位置
    showlegend: false,
    xaxis: {
      showline: true, // 显示轴线条
      linecolor: 'black', // 透明（RGBA 最后一位为透明度 0）
      gridcolor: 'white', // 网格线颜色
      zeroline: true, // 显示 0 坐标线
      zerolinecolor: 'white', // 0 坐标线颜色
      tickmode: 'array', // 使用自定义刻度
          tickvals: null, // 自定义刻度位置
          showtickmarks: true, // 显示刻度线
          tickwidth: 1, // 刻度线宽度
          tickcolor: '#666', // 刻度线颜色
          ticklen: 5, // 刻度线长度
          title: {
        text: 'UMAP2', // Y轴标题
        font: { size: 12, color: '#333' },
      },
    },
    yaxis: {
      showline: true, // 显示轴线条
      linecolor: 'black', // 透明
      gridcolor: 'white', // 网格线颜色
      zeroline: true, // 显示 0 坐标线
      zerolinecolor: 'white', // 0 坐标线颜色
      tickmode: 'array', // 使用自定义刻度
          tickvals: null, // 自定义刻度位置
          showtickmarks: true, // 显示刻度线
          tickwidth: 1, // 刻度线宽度
          tickcolor: '#666', // 刻度线颜色
          ticklen: 5 ,// 刻度线长度
          title: {
        text: 'UMAP1', // Y轴标题
        font: { size: 12, color: '#333' },
      },
    },
    
  }
  console.log(trace)
  if (chartContainer.value) {
    Plotly.newPlot(chartContainer.value, trace, layout)
  }
}

// 向父组件暴露方法
defineExpose({
  childMethod,
  changeData,
})

onMounted(() => {
  // 模拟数据集
  childMethod()
})
</script>

<style scoped>
/* 可根据需要调整图表容器样式 */
</style>